
import styles from './ChatBox.module.less'
import { HighlightjsParam, LocalModelMessage } from '../../../src/store/types'
import { ChunkMessage } from '../../../src/model/types'
import ChatChunkBox from './ChatChunkBox'

export default function ChatBox(props: ChatBoxProps) {
    return (
			<div className={styles["chat-box"]}>
				{
					props.messages?.map((item) => {
						if(item.message?.role === 'user') {
							return <div key={item.msgId} className={["chat-item", styles['user-message']].join(' ')} >
								<div className={styles["chat-content"]}>
									{item.message?.content}
								</div>
							</div>
						}
						return (
							<ChatChunkBox chunks={item.message?.chunks ?? []} highlightjs={props.highlightjs} />
						)	
					})
				}
				<ChatChunkBox chunks={props.chunks} />
			</div>
    )
}

interface ChatBoxProps {
  messages?: LocalModelMessage[]
	chunks?: ChunkMessage[]
	highlightjs?: HighlightjsParam
}

